<template>
	<view class="content">
		<view class="balance-box">
			<view class="title">
				<image src="../../../static/image/mine/balance.png" mode=""></image>
				<view>可用餘額（園）</view>
			</view>
			<view class="balance">
				<text>￥</text>
				{{myInfor.money}}
			</view>
		</view>
		<view class="one-serve" @click="toWithdraw">
			<view class="left">
				<image src="../../../static/image/mine/withdraw.png" mode=""></image>
				<view>提現</view>
			</view>
			<image class="open" src="../../../static/image/mine/open.png" mode=""></image>
		</view>
		<view class="one-serve" @click="showBill">
			<view class="left">
				<image src="../../../static/image/mine/detail.png" mode=""></image>
				<view>明細</view>
			</view>
			<image class="open" src="../../../static/image/mine/open.png" mode=""></image>
		</view>
		<view class="one-serve" @click="showAward">
			<view class="left">
				<image src="../../../static/image/mine/award.png" mode=""></image>
				<view>我的獎勵</view>
			</view>
			<image class="open" src="../../../static/image/mine/open.png" mode=""></image>
		</view>
		<view class="one-serve" style="border: none;" @click="showCard">
			<view class="left">
				<image src="../../../static/image/mine/card.png" mode=""></image>
				<view>我的銀行卡</view>
			</view>
			<image class="open" src="../../../static/image/mine/open.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			myInfor(){
				return this.$store.getters.myInfor
			}
		},
		methods:{
			//顯示我的銀行卡
			showCard(){
				uni.navigateTo({
					url:'/pages/mine/my-bank-card/my-bank-card'
				})
			},
			// 去提現
			toWithdraw(){
				uni.navigateTo({
					url:'/pages/mine/withdraw-deposit/withdraw-deposit'
				})
			},
			// 显示明细
			showBill(){
				uni.navigateTo({
					url:'/pages/financial-details/financial-details'
				})
			},
			// 顯示我的獎勵
			showAward(){
				uni.navigateTo({
					url:'/pages/mine/my-award/my-award'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
		.balance-box{
			width:702rpx;margin-left:auto;
			margin-right:auto;margin-top:26rpx;
			background-color:#ffffff;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204,204,204,0.3);
			border-radius: 20rpx;padding:28rpx 24rpx;
			box-sizing: border-box;height:260rpx;
			.title{
				display: flex;align-items: center;
				font-size:30rpx;color:#040404;
				image{
					width:29rpx;height:30rpx;margin-right:10rpx;
				}
			}
			.balance{
				margin-top:45rpx;margin-left:39rpx;font-size:70rpx;
				color:#040404;
				text{
					font-size:36rpx;
				}
			}
		}
		.one-serve{
			width:670rpx;height:121rpx;display: flex;align-items: center;
			justify-content: space-between;border-bottom:1px solid #F0F0F0;
			margin-left:auto;margin-right:auto;
			.left{
				display: flex;align-items: center;font-size:30rpx;color:#040404;
				image{
					width:45rpx;height:45rpx;margin-right:15rpx;
				}
			}
			.open{
				width:13rpx;height:20rpx;
			}
		}
	}
</style>
